<html>
<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/Bookindex.css" />
</head>

<body>
<!-- 主体区域  与css相结合-->
<section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
        <h1>小黑记事本</h1>
        <input
                autofocus="autofocus"
                autocomplete="off"
                placeholder="请输入文本内容"
                class="new-todo"
                v-model="text"
                @keyup.enter="fun"
        />
    </header>

    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo"  v-for="(item,index)  in texts">
                <div class="view">
                    <span class="index">{{index + 1}}</span> <label>{{item}}</label>
                    <button class="destroy" @click="del(index)"></button>
                </div>
            </li>
        </ul>
    </section>

    <footer class="footer">
        <span class="todo-count"> <strong>{{texts.length}}</strong> items left </span>
        <button class="clear-completed" @click="empty">
            Clear
        </button>
    </footer>
</section>

<footer class="info">
    <p>
        <a href="http://www.jd.com"
        ><img src="img/logo.png" alt=""/></a>
    </p>
</footer>


<script src="../js/vue.js"></script>

</body>
<script>
    let app = new Vue({
        el:"#todoapp",
        data:{
            text:"",
            texts:["洗澡澡","开心心"],
        },
        methods:{
            fun(){
                this.texts.push(this.text)
                this.text = ""
            },
            empty(){
                this.texts = []
            },
            del(index){
                this.texts.splice(index,1)
            }
        }
    })
</script>
</html>
